import React, { memo, useEffect } from 'react';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { getSongsListAction } from "../../store/actionCreators";
import { formatImageSize } from "@/utils/format-utils";

import ThemeHeaderPlayer from "@/components/theme-header-player";
import { SongsWrapper } from "./style";

const PlaySongs = memo(() => {
  const dispatch = useDispatch();
  const { songsList } = useSelector(state => ({
    songsList: state.getIn(["player", "songsList"])
  }), shallowEqual);

  useEffect(() => {
    dispatch(getSongsListAction());
  }, [dispatch]);

  return (
    <SongsWrapper>
      <ThemeHeaderPlayer title="包含这首歌的歌单" />

      <div className="songs">
        {
          songsList.map(item => {
            return (
              <div className="songs-item" key={item.id}>
                <a href="/" className="image">
                  <img src={formatImageSize(item.coverImgUrl, 50)} alt="" />
                </a>

                <div className="info text-nowrap">
                  <a href="/" className="name">{item.name}</a>
                  <div className="auchor">
                    by 
                    <a href="/" className="nickname">{item.creator.nickname}</a>
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
    </SongsWrapper>
  )
})

export default PlaySongs